{$layout}
{$template "/code_editor"}
{$template "menu"}

{$var "header"}
<script type="text/javascript" src="/js/sortable.min.js"></script>

<script type="text/javascript">
	Tea.context(function() {
		{$ .formJavascript}
	});
</script>
{$end}


<!-- 数据源CSS -->
<div v-html="formCSS"></div>

<form class="ui form" data-tea-action="$" data-tea-success="submitSuccess">
    <input type="hidden" name="agentId" :value="agentId"/>
    <input type="hidden" name="appId" :value="app.id"/>
    <table class="ui table definition selectable">
		<tbody>
			<tr>
				<td class="title">监控项名称 *</td>
				<td>
					<input type="text" name="name" maxlength="100"/>
					<p class="comment">比如连接数监控</p>
				</td>
			</tr>
			<tr>
				<td>数据源 *</td>
				<td>
					<!-- 数据源列表 -->
					<select class="ui dropdown" name="sourceCode" v-model="sourceCode" @change="changeSource()" style="width:12em">
						<option v-for="source in sources" :value="source.code" v-if="source.category == 'basic'">基础 &raquo; {{source.name}}</option>
						<optgroup label="------------------"></optgroup>

						<!-- 常用 -->
						<option v-for="source in sources" :value="source.code" v-if="source.category == 'common'">常用 &raquo; {{source.name}}</option>

						<!-- 插件 -->
						<optgroup label="------------------" v-if="hasPluginSource"></optgroup>
						<option v-for="source in sources" :value="source.code" v-if="source.category == 'plugin'">插件 &raquo; {{source.name}}</option>
					</select>
					<p class="comment" style="margin-bottom:0.3em">{{sourceDescription}} <var v-if="sourcePlatforms.length > 0">，支持的平台：<span v-for="platform in sourcePlatforms" class="ui label tiny">{{platform}}</span></var><span v-if="selectedSource != null && selectedSource.variables != null && selectedSource.variables.length > 0">，</span><a href="" v-if="selectedSource != null && selectedSource.variables != null && selectedSource.variables.length > 0" @click.prevent="showSourceVariables(1)">当前数据源提供的数据变量<i class="icon angle" :class="{down:!sourceVariablesVisible1,up:sourceVariablesVisible1}"></i></a></p>

					<!-- 变量 -->
					<div style="line-height:1.8" v-if="sourceVariablesVisible1 && selectedSource != null && selectedSource.variables != null" class="comment">
						<div class="ui divider" style="margin-bottom:0.4em!important;"></div>
						<span>该数据源提供的数据变量：</span>
						<span v-for="(var1, index) in selectedSource.variables"><var class="ui label tiny" v-text="'${' + var1.code + '}'" style="font-style: normal;"></var> - {{var1.description}} <var style="font-style: normal;" v-if="index < selectedSource.variables.length - 1">；</var><var style="font-style: normal;" v-if="index == selectedSource.variables.length - 1">。</var> </span>
					</div>
				</td>
			</tr>
		</tbody>
		{$range $x := .formGroups1}
			<!-- {$ $x.Namespace} source options begins -->
			{$if .IsComposed}
				{$ $x.HTML }
			{$else}
				<tbody v-show="sourceCode == '{$ $x.Namespace}'">
					{$ $x.HTML}
				</tbody>
			{$end}
			<!-- {$ $x.Namespace} source options end -->
		{$end}
		<tbody>
			<tr>
				<td colspan="2">
					<a href="" v-if="!advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">更多选项 <i class="icon down angle"></i> </a>
					<a href="" v-if="advancedOptionsVisible" @click.prevent="showAdvancedOptions()" style="font-weight:normal">收起选项 <i class="icon up angle"></i> </a>
				</td>
			</tr>
		</tbody>
		{$range $x := .formGroups2}
			<!-- {$ $x.Namespace} source options begins -->
			<tbody v-show="advancedOptionsVisible && sourceCode == '{$ $x.Namespace}'">
				{$ $x.HTML}
			</tbody>
			<!-- {$ $x.Namespace} source options end -->
		{$end}
        <tbody v-show="advancedOptionsVisible">
            <!-- 通用数据源设置 -->
            <tr>
                <td>数据格式</td>
                <td>
                    <select class="ui dropdown" name="dataFormat" v-model="dataFormat" @change="changeDataFormat()" style="width:10em">
                        <option v-for="dataFormat in dataFormats" :value="dataFormat.code">{{dataFormat.name}}</option>
                    </select>
					<p class="comment">{{dataFormatDescription}}</p>
                </td>
            </tr>
            <tr>
                <td>刷新间隔</td>
                <td>
                    <div class="ui input right labeled">
                        <input type="text" name="interval" style="width: 5em" maxlength="10" value="30"/>
                        <label class="ui label">秒</label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>阈值设置<em>（触发条件）</em></td>
                <td>
					<p class="threshold-box">
						<span class="ui label tiny" v-for="(cond, index) in conds" :class="{blue:addingCond != null && cond.id == addingCond.id}">{{cond.param}} <em>{{cond.op}}</em> {{cond.value}} [<var>{{cond.noticeLevelName}}</var><var v-if="cond.noticeMessage != null && cond.noticeMessage.length > 0">:{{cond.noticeMessage}}</var>] <var v-if="cond.actions.length > 0">[{{cond.actions.length}}动作]</var> <var v-if="cond.maxFails > 1">[连续{{cond.maxFails}}次]</var>&nbsp; <a href="" title="修改" @click.prevent="editCond(cond)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removeCond(index)"><i class="icon remove small"></i></a> <a href="" title="拖动改变顺序" v-show="conds.length > 1"><i class="icon bars handle"></i></a>
						<input type="hidden" name="condParams" v-model="cond.param"/>
						<input type="hidden" name="condOps" v-model="cond.op"/>
						<input type="hidden" name="condValues" v-model="cond.value"/>
						<input type="hidden" name="condNoticeLevels" v-model="cond.noticeLevel"/>
						<input type="hidden" name="condNoticeMessages" v-model="cond.noticeMessage"/>
						<input type="hidden" name="condActions" :value="JSON.stringify(cond.actions)"/>
						<input type="hidden" name="condMaxFails" v-model="cond.maxFails"/>
						</span>

					</p>
					<div v-if="addingCond != null" class="field">
                    	<table class="ui table without-definition">
							<thead>
								<tr>
									<th style="width:11em">参数</th>
									<th>运算符</th>
									<th>对比阈值</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<input type="text" name="addingParam" v-model="addingCond.param" @keyup.enter="saveCond" @keypress.enter.prevent="1" style="width:10em"/>
										<p style="margin-top:1em"><a href="" @click.prevent="showCondMoreOptions(addingCond)" style="font-weight: normal">更多选项<i class="icon angle" :class="{down:!addingCond.moreOptions,up:addingCond.moreOptions}"></i> </a></p>
									</td>
									<td style="width:11em">
										<select class="ui dropdown" style="width:10em" v-model="addingCond.op" @change="changeCondOp(addingCond)">
											<option v-for="op in operators" :value="op.op">{{op.name}}</option>
										</select>
										<p class="comment">{{addingCond.description}}</p>
									</td>
									<td class="value-td">
										<textarea v-model="addingCond.value" rows="1"></textarea>
									</td>
								</tr>
								<tr v-show="addingCond.moreOptions">
									<td>
										<select class="ui dropdown" style="width:10em" v-model="addingCond.noticeLevel">
											<option v-for="level in noticeLevels" :value="level.code">{{level.name}}</option>
										</select>
									</td>
									<td colspan="2">
										<textarea v-model="addingCond.noticeMessage" placeholder="通知消息，可以为空" rows="1"></textarea>
										<p class="comment">同参数一样，通知消息中也可以使用变量</p>
									</td>
								</tr>
								<tr v-show="addingCond.moreOptions">
									<td style="font-weight: normal; background:white" colspan="3">
										<div class="ui fields inline">
											<div class="ui field">
												连续触发
											</div>
											<div class="ui field">
												<input type="text" placeholder="次数" v-model="addingCond.maxFails" size="4" value="" maxlength="4" @keyup.enter="saveCond" @keypress.enter.prevent="1"/>
											</div>
											<div class="ui field">
												次后发通知
											</div>
										</div>
									</td>
								</tr>
								<tr v-show="addingCond.moreOptions" v-for="(actionMap, index) in addingCond.actions">
									<td>
										<select class="ui dropdown" style="width:10em" name="actionCodes" v-model="actionMap.code">
											<option v-for="action in actions" :value="action.code">{{action.name}}</option>
										</select>
									</td>
									<td colspan="2">
										<input type="text" v-model="actionMap.options.path" placeholder="脚本路径" @keyup.enter="saveCond" @keypress.enter.prevent="1"/>
										<p class="comment"><a href="" title="删除此动作" @click.prevent="removeCondAction(index)"><i class="icon remove small"></i> </a> </p>
									</td>
								</tr>
								<tr v-show="addingCond.moreOptions">
									<td colspan="3"><a href="" style="font-weight: normal;" @click.prevent="addCondAction()">+动作 &nbsp; </a></td>
								</tr>
							</tbody>
						</table>
						<button class="ui primary button tiny" type="button" @click.prevent="confirmAddingCond()" v-if="addingCond.isAdding">确认添加</button>
						<button class="ui primary button tiny" type="button" @click.prevent="saveCond()" v-if="!addingCond.isAdding">保存修改</button> &nbsp; <a href="" @click.prevent="cancelAddingCond()">取消</a>
					</div>

					<div v-if="addingCond == null">
						<button type="button" class="ui button tiny" @click="addCond()" title="添加新阈值">+</button>
						&nbsp; <a href="" @click.prevent="addDefaultThresholds()" v-if="defaultThresholds.length > 0">添加当前数据源内置阈值模板</a>
					</div>

					<p class="comment" style="margin-bottom:0.3em">使用<span class="ui label tiny">${N}</span>表示第N行数据，从0行开始，比如：<span class="ui label tiny">${0}</span>, <span class="ui label tiny">${1}</span>；使用<span class="ui label tiny">${NAME}</span>来获取KEY-VALUE形式的数据，比如<span class="ui label tiny">${name}</span>；使用<span class="ui label tiny">${OLD}</span>表示上一条数据。支持加(+)减(-)乘(*)除(/)取余(%)运算符<span v-if="selectedSource != null && selectedSource.variables != null && selectedSource.variables.length > 0">，</span><a href="" v-if="selectedSource != null && selectedSource.variables != null && selectedSource.variables.length > 0" @click.prevent="showSourceVariables(2)">当前数据源提供的数据变量<i class="icon angle" :class="{down:!sourceVariablesVisible2,up:sourceVariablesVisible2}"></i></a></p>

					<!-- 变量 -->
					<div style="line-height:1.8" v-if="sourceVariablesVisible2 && selectedSource != null && selectedSource.variables != null" class="comment">
						<div class="ui divider" style="margin-bottom:0.4em!important;"></div>
						<span>该数据源提供的数据变量：</span>
						<span v-for="(var1, index) in selectedSource.variables"><var class="ui label tiny" v-text="'${' + var1.code + '}'" style="font-style: normal;"></var> - {{var1.description}} <var style="font-style: normal;" v-if="index < selectedSource.variables.length - 1">；</var><var style="font-style: normal;" v-if="index == selectedSource.variables.length - 1">。</var> </span>
					</div>
                </td>
            </tr>
			<tr>
				<td>成功判定</td>
				<td>
					<div class="ui input right labeled">
						<input type="text" name="recoverSuccesses" style="width: 5em" maxlength="10" value="1"/>
						<label class="ui label">次成功</label>
					</div>
					<p class="comment">如果因为触发了某个阈值而发生了错误，则在N次成功获取数据后，发送成功级别的通知。</p>
				</td>
			</tr>
            <tr>
                <td>是否启用</td>
                <td>
                    <div class="ui checkbox">
                        <input type="checkbox" name="on" value="1" checked="checked"/>
                        <label></label>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <button class="ui button primary" type="submit">保存</button> &nbsp; <a :href="from">返回</a>
</form>